<template>
  <div class="task">
    <div class="intersection">
      <div class="list" v-for="(item, index) in intersectionList" :key="index"
        :class="{ acitve: index == intersectionActive }" @click="intersectionClick(index)">
        {{ item.value }}
      </div>
    </div>

    <div class="tip">
      <div class="common">
        <div class="common-input">
          <el-input v-model="commonValue" placeholder="任务名称/任务描述" clearable></el-input>
        </div>

        <div class="common-input">
          <el-select v-model="commonUpdateValue" placeholder="请选择" clearable>
            <el-option v-for="item in commonUpdateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="common-input">
          <el-date-picker v-model="commonDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>

        <div class="common-button" @click="searchHit">搜索</div>
        <div class="common-button" style="background: #999999" @click="replacementHit">
          重置
        </div>
        <div class="common-add" @click="addHit">新增</div>

      </div>

    </div>

    <div class="table" v-loading="loading">
      <el-table :data="tableData" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="taskName" label="任务名称"> </el-table-column>
        <el-table-column prop="taskPrice" label="任务金额（元）">
        </el-table-column>

        <el-table-column v-if="intersectionActive == 3" prop="workTime" label="工作日期">
        </el-table-column>

        <el-table-column v-if="intersectionActive == 2" label="合作类型" width="400">
          <template slot-scope="scope">
            <div class="tags" v-for="(item, index) in scope.row.taskJoinClassifyList" :key="index">
              <el-tag>
                {{ item }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column v-else prop="taskDesc" label="任务描述" width="600">
        </el-table-column>

        <el-table-column prop="" label="状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">待发布</el-tag>
            <el-tag v-else-if="scope.row.status == 1" type="success">已发布</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="error">已下架</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="320">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" v-if="scope.row.status != 1" @click.prevent="editHit(scope.row)">
                编辑
              </div>

              <div class="list" @click.prevent="detailsHit(scope.row)">
                查看详情
              </div>

              <div class="list" @click.prevent="upHit(scope.row)">
                {{ scope.row.isIndex == 1 ? "取消置顶" : "置顶" }}
              </div>

              <div class="list" @click.prevent="statusHit(scope.row)">
                {{
                  scope.row.status == 0
                    ? "上架"
                    : scope.row.status == 1
                      ? "下架"
                      : scope.row.status == 2
                        ? "上架"
                        : ""
                }}
              </div>


              <div class="list"  @click.prevent="deleteHit(scope.row)">
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--置顶弹出框-->
    <div class="delete">
      <el-dialog title="置顶" :visible.sync="isUseVisible" :before-close="isUseClose">
        <div class="delete-title">
          是否确认{{ commonObj.isIndex == 1 ? "取消置顶" : "置顶" }}
        </div>
        <div class="delete-attachment">
          <div class="list" @click="isUseClose">拒绝</div>
          <div class="list" @click="isUseConfirm">确定</div>
        </div>
      </el-dialog>
    </div>

    <!--提示弹出框-->
    <div class="delete">
      <el-dialog title="提示" :visible.sync="statusVisible" :before-close="statusClose">
        <div class="delete-title">
          是否确认{{
            commonObj.status == 0
              ? "上架"
              : commonObj.status == 1
                ? "下架"
                : "上架"
          }}
        </div>
        <div class="delete-attachment">
          <div class="list" @click="statusClose">拒绝</div>
          <div class="list" @click="statusConfirm">确定</div>
        </div>
      </el-dialog>
    </div>

        <!--删除弹出框-->
    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">
          是否确认删除
        </div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">拒绝</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  makeTaskList,
  makeTaskListIdPut,
  makeTaskStatusListIdPut,
  makeTaskStatusListIdDelete
} from "@/api/make";

export default {
  data() {
    return {
      //------------------------
      intersectionList: [
        {
          key: 0,
          value: "线下任务",
        },
        {
          key: 1,
          value: "线上任务",
        },
        {
          key: 2,
          value: "合作任务",
        },
        {
          key: 3,
          value: "兼职合作",
        },
      ],
      intersectionActive: 0,
      //-----------------
      commonValue: "",
      commonUpdateOptions: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "0",
          label: "待发布",
        },
        {
          value: "1",
          label: "已发布",
        },
        {
          value: "2",
          label: "已下架",
        },
      ],
      commonUpdateValue: "",
      commonDate: [],
      commonStart: "",
      commonEnd: "",
      //-----------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      loading: false,
      commonObj: {},
      //------
      isUseVisible: false,
      statusVisible: false,
      deleteVisible: false,
    };
  },
  created() {
    this.loading = true;
    this.makeTaskListMet();
  },
  methods: {
    intersectionClick(index) {
      this.intersectionActive = index;
      this.loading = true;
      this.page = 1;
      this.makeTaskListMet();
    },
    timeData(date) {
      return date.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        // hour: "2-digit",
        // minute: "2-digit",
        // second: "2-digit",
      });
    },
    makeTaskListMet() {
      let params = {
        taskType: this.intersectionActive,
        keyWord: this.commonValue,
        startTime: this.commonStart,
        endTime: this.commonEnd,
        status: this.commonUpdateValue == -1 ? "" : this.commonUpdateValue,
        taskClassifyId: "",
        taskJoinClassifyId: "",

        pageSize: this.limit,
        pageNo: this.page,
      };

      makeTaskList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.taskList.forEach((item, index) => {
            item.taskPrice = Number(item.taskPrice / 100).toFixed(2);
            if (item.taskJoinClassifyName && item.taskJoinClassifyName != "") {
              item.taskJoinClassifyList = item.taskJoinClassifyName.split(";");
            }
          });

          console.log("222", res.resultData);

          this.tableData = res.resultData.taskList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },

    searchHit() {
      if (this.commonDate.length > 0) {
        this.commonStart = this.timeData(new Date(this.commonDate[0]));
        this.commonEnd = this.timeData(new Date(this.commonDate[1]));
      } else {
        this.commonStart = "";
        this.commonEnd = "";
      }

      this.page = 1;
      this.loading = true;
      this.makeTaskListMet();
    },
    replacementHit() {
      this.commonDate = [];
      this.commonStart = "";
      this.commonEnd = "";
      this.commonValue = "";
      this.commonUpdateValue = "";

      this.page = 1;
      this.loading = true;
      this.makeTaskListMet();
    },

    //--------------

    addHit() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/make/task-list/task-list-surface-add",
      });
    },
    editHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.$router.push({
        path: "/make/task-list/task-list-surface-add",
        query: {
          soucre: this.intersectionActive,
          id: item.taskId,
        },
      });
    },
    detailsHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/make/task-list/task-list-surface-details",
        query: {
          soucre: this.intersectionActive,
          id: item.taskId,
        },
      });
    },
    //------
    upHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error('暂无权限，请联系管理员开通')
        return;
      }
      this.commonObj = item;
      this.isUseVisible = true;
    },
    isUseClose() {
      this.isUseVisible = false;
    },
    isUseConfirm() {
      let params = this.commonObj.taskId;

      makeTaskListIdPut(params).then((res) => {
        if (res.errorCode == null) {
          this.isUseVisible = false;
          this.$message.success("修改置顶成功！");
          this.loading = true;
          this.makeTaskListMet();
        }
      });
    },
    //--------
    statusHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error('暂无权限，请联系管理员开通')
        return;
      }
      this.commonObj = item;
      this.statusVisible = true;
    },
    statusClose() {
      this.statusVisible = false;
    },
    statusConfirm() {
      let params = this.commonObj.taskId;

      makeTaskStatusListIdPut(params).then((res) => {
        if (res.errorCode == null) {
          this.statusVisible = false;
          this.$message.success("修改状态成功！");
          this.loading = true;
          this.makeTaskListMet();
        }
      });
    },
        //--------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.taskId;

      makeTaskStatusListIdDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("删除成功！");
          this.loading = true;
          this.makeTaskListMet();
          this.deleteVisible = false;
        }
      });
    },
    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.makeTaskListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.makeTaskListMet();
    },
  },
};
</script>

<style lang="less" scoped>
.task {
  @import url("@/assets/css/common.less");
  @import url("@/assets/css/delete.less");

  .intersection {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .list {
      width: 80px;
      height: 30px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    .acitve {
      background: #2a82e4;
      color: #fff;
    }
  }

  .table {
    /deep/ .el-table td.el-table__cell div {
      display: flex;
      flex-wrap: wrap;
    }

    .tags {
      height: 40px;
      margin-right: 10px;
      align-items: center;
      display: flex;
    }
  }

  .common-add {
    padding: 9px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #2a82e4;
    font-size: 14px;
    color: #fff;
    margin-left: 20px;
    cursor: pointer;
  }
}
</style>